<template>
	<view>
		<y-tabs :list='tabsList' fixed v-model="query.type" @change='changeTabs'></y-tabs>

		<!-- #ifdef MP-WEIXIN -->
		<view v-if="WEBCONFIG?.weixin_video_status && WEBCONFIG?.weixin_video_status == 1">
			<ad :unit-id="WEBCONFIG?.weixin_video_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->
		<z-paging-mini ref='paging' use-page-scroll v-model="list" @query='getList'>
			<view class="px-20 grid-columns-2  grid-gap-12 mt-16">
				<view class="bg-black-1 round-8 flex flex-center h-180" v-for="(item,index) in list" :key='index'>
					<loading v-if="item.status=='1'"> </loading>

					<image :src="item?.image_url" class="w-p-100 h-180 round-8" mode="aspectFill"
						v-if="item.status=='2'" @click="open(item)">
					</image>
					<view class="flex flex-column flex-center h-180 round w-p-100" v-if="item.status=='3'">
						<image src="@/static/icon/fail.png" class="h-100" mode="heightFix"></image>
						<text class="mt-15 fs-12 text-999">生成失败</text>
					</view>
				</view>
			</view>
		</z-paging-mini>
		<y-popup ref='popup' mode='bottom' round='16'>
			<view class="pb-safe-area bg-black-1 pt-5 overflow-y-scroll" style="max-height: 65vh;">
				<view class="  p-20  text-center">
					<image :src="detail?.image_url" show-menu-by-longpress class="w-p-100 round-6" mode="widthFix">
					</image>
					<text class="fs-12 text-999">长按保存图片</text>
					<view class="flex flex-column grid-gap-8 mt-20">
						<view v-for="(item,index) in detail?.content" class="flex fs-15 flex-y-center">
							<view class="text-999">{{item.label}}:</view>
							<view class="text-white ml-6" v-if='item.label!="码眼"'> {{item.value}}</view>
							<view class="text-white ml-6 flex flex-y-center" v-else>
								<text>{{item.value}}</text>
								<image :src="getUrl(item.value)" class="w-20 h-20 ml-6"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging-mini/components/z-paging-mini/js/hooks/useZPaging.js";
	import { reactive, ref } from 'vue';
	import { $http } from '@/utils';
	import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import system from "@/utils/system.js";
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const query = ref({
		type: 'qrcode'
	})
	const popup = ref()
	const detail = ref()
	const paging = ref()
	const list = ref([])
	useZPaging(paging)
	const tabsList = reactive([
		{ label: '二维码', value: 'qrcode' },
		{ label: '艺术字', value: 'textart' },
		{ label: '光影字', value: 'textshadow' },
		{ label: '隐藏字', value: 'texthidden' },
	])
	onShow(() => {
		if (paging.value) {
			paging.value.reload()
		}
		// #ifdef H5
		$tool.replaceUrlParam('appid', system.appid());
		let user_id = USERINFO.value?.id
		if (user_id) {
			$tool.replaceUrlParam('user_id', user_id)
		}
		// #endif
	})

	const getList = (page, limit) => {
		$http.get('Works/getList', { page: page, limit: limit, ...query.value }).then(res => {
			paging.value.complete(res.data)
		})
	}
	const getUrl = (e) => {
		const shape = WEBCONFIG.value.shape_list.find(item => e === item.value);
		return shape ? shape.url : undefined;
	};

	const open = (e) => {
		detail.value = e
		popup.value.open()
	}

	const changeTabs = () => {
		paging.value.reload()
	}
</script>

<style>
</style>